<template>
  <div class="login-index">
    <div class="login-index-bg" />
    <div class="login-index-content">
      <div class="login">
        <div class="login-title">欢迎登录SAAS</div>
        <div class="login-form">
          <el-form :model="form">
            <el-form-item>
              <el-input v-model="form.username" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
          </el-form>
        </div>
        <div class="login-btn">
          <el-button type="primary" v-throttle="{ time: 1000, fn: getLogin }">立即登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  import { useRouter } from 'vue-router'

  import { userApi } from 'api/index.js'
  import { useUserStore } from 'store/modules/user.js'
  const form = reactive({
    username: ``,
    password: ``,
  })
  const router = useRouter()

  const getLogin = async () => {
    const { username, password } = form
    const response = await userApi.login(username, password)
    const { avatar, nickname, token, routes } = response.data.data
    console.log(avatar, nickname, token, routes)

    const userStore = useUserStore()
    userStore.setAvatar(avatar)
    userStore.setNickname(nickname)
    userStore.setToken(token)
    userStore.setRoutes(routes)

    // 本地存储token
    localStorage.setItem(`token`, token)
    router.push({ path: `/Dashboard` })
  }
</script>

<style lang="scss" scoped>
  .login-index {
    width: 100%;
    min-height: 100%;
    background-image: url('https://img.js.design/assets/img/64f5a8e052a5c2db838dc5be.jpg#09e6b584342275612c130d8b9f6addc6');
    background-size: cover;
    display: flex;
    .login-index-bg {
      width: 53.333333333333336%;
      height: 100vh;
      opacity: 1;
      background-image: url('https://img.js.design/assets/img/6523a777f9b8ca0dadf4cfc6.png#3ce67e69d28b9bcc0d833fa5dbcd90cf');
      background-size: cover;
    }
    .login-index-content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .login {
        width: 30.0625rem;
        height: 37.5625rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 1.25rem;
        box-shadow:
          0px 0px 0px rgba(0, 0, 0, 0.1),
          0px 17px 36px rgba(23, 57, 222, 0.25);

        .login-title {
          margin-top: 2.5rem;
          text-align: center;
          font-size: 2.25rem;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 52.3.2581rem;
          color: rgba(0, 0, 0, 1);
          vertical-align: top;
        }

        .login-form {
          margin-top: 5rem;

          :deep(.el-form-item__content) {
            justify-content: center;
          }
          :deep(.el-input) {
            width: 23.6875rem;
            height: 3rem;
          }
        }
      }

      .login-btn {
        display: flex;
        justify-content: center;
        align-items: center;

        :deep(.el-button) {
          margin-top: 4.4375rem;
          width: 23.6875rem;
          height: 3rem;
          font-size: 1.25rem;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 28.1.81rem;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;
        }
      }
    }
  }
</style>
